<template>
    <div>
      <van-nav-bar title="同城安装" left-arrow @click-left="onClickLeft" />
      <van-image height="25rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <div class="title">
        <p>同城安装同城安装同城安装同城安装同城安装</p>
      </div>
      <div class="price">
        <label style="color: #F35C3B;">￥</label>
        <label class="price-label">90元</label>
        <label>起</label>
      </div>
      <div class="bao">
        <label class="bao-p">保</label>
        <label >已交保证金999元</label>
      </div>
      <div class="serve">
        <van-icon name="passed" color="#149BD0" size="0.94rem" />
        <label >质量保证</label>
        <van-icon name="passed" color="#149BD0" size="0.94rem" />
        <label >优质服务</label>
        <van-icon name="passed" color="#149BD0" size="0.94rem" />
        <label >售后无忧</label>
      </div>
      <div class="specifications">
        <label>已选</label>
        <label>选择 规格</label>
        <van-icon style="float: right" name="arrow" size="0.94rem" />
      </div>
      <div class="serve-content">服务内容</div>
      <van-image height="19.94rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <div>

        <van-tabbar v-model="active">
          <van-tabbar-item style="color: #999999" icon="phone">联系商家</van-tabbar-item>
          <van-button @click="button_zhi" style=" margin-top: 0.175rem; width: 15.5rem" round type="info">立即购买</van-button>
        </van-tabbar>
      </div>

      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods_info"
        :goods-id="goods_id"
        :hide-stock="sku.hide_stock"
        :quota="quota"
        :quota-used="quota_used"
        :initial-sku="initialSku"
        reset-stepper-on-hide
        reset-selected-sku-on-hide

        disable-stepper-input
        :close-on-click-overlay="closeOnClickOverlay"
        :custom-sku-validator="customSkuValidator"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
      />  <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->
      <van-button
        block
        type="primary"
        @click="showBase = true"
      >
      </van-button>




    </div>
</template>

<script>
    import {Toast} from "vant";

    export default {
      name: "citywide_details",
      data() {
        return {
          active: 0,
          sku: {
            // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
            // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
            tree: [
              {
                k: '颜色',
                k_id: '1',
                v: [
                  {
                    id: '30349',
                    name: '天蓝色',
                    imgUrl:
                      'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
                  },
                  {
                    id: '1215',
                    name: '白色'
                  }
                ],
                k_s: 's1',
                count: 2
              },
              {
                k: '尺寸',
                k_id: '2',
                v: [
                  {
                    id: '1193',
                    name: '1'
                  },
                  {
                    id: '1194',
                    name: '2'
                  }
                ],
                k_s: 's2',
                count: 2
              }
            ],
            // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
            list: [
              {
                id: 2259,
                price: 120, //价格
                discount: 122,
                s1: '1215',
                s2: '1193',
                s3: '0',
                s4: '0',
                s5: '0',
                stock_num: 20, //库存
                goods_id: 946755
              },
              {
                id: 2260,
                price: 110,
                discount: 112,
                s1: '1215',
                s2: '1194',
                s3: '0',
                s4: '0',
                s5: '0',
                stock_num: 2, //库存
                goods_id: 946755
              },
              {
                id: 2257,
                price: 130,
                discount: 132,
                s1: '30349',
                s2: '1193',
                s3: '0',
                s4: '0',
                s5: '0',
                stock_num: 40, //库存
                goods_id: 946755
              },
              {
                id: 2258,
                price: 100,
                discount: 100,
                s1: '30349',
                s2: '1194',
                s3: '0',
                s4: '0',
                s5: '0',
                stock_num: 50, //库存
                goods_id: 946755
              }
            ],
            price: '5.00',  //？？
            stock_num: 227, // 商品总库存？？
            none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
            hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
          },

          goods_id: '946755',
          quota: 3, //限购数量 库存旁边显示限购数
          quota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
          goods_info: {
            title: '测试商品A',
            picture:'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg'  //图片这个我有点混乱
          },
          initialSku:{
            s1: "0001",
            s2: "1001",
            selectedNum: 1
          },
          showBase: true,    //sku的框的显示
          showCustom: false,
          showStepper: false,
          showSoldout: false,
          closeOnClickOverlay: true,  //点击空白处关闭购物框
          initialSku: {
            s1: '30349',
            s2: '1193',
            selectedNum: 3, //下面的数字选择框的数字即买了多少件
          },
        };
      },
      methods: {
        onClickLeft() {
          this.$router.push({ path:'/citywide_index'  })
        },
        button_zhi(){
          this.show = true;
        },
        onSelecta(option) {
          Toast(option.name);
          this.showShare = false;
        },
        onSelect(item) {
          // 默认情况下点击选项时不会自动收起
          // 可以通过 close-on-click-action 属性开启自动收起
          this.show = false;
          Toast(item.name);
        },
        onBuyClicked(sku) {
          this.$toast('buy:' + JSON.stringify(sku));
          console.log(JSON.stringify(sku))
        },

        onAddCartClicked(sku) {
          this.$toast('add cart:' + JSON.stringify(sku));
        },

        quanbu(){
          console.log("************888888")
        },

        onChange(index) {
          this.showList = false;
          this.chosenCoupon = index;
        },
        onExchange(code) {
          this.coupons.push(coupon);
        },
        showPopup(){

        },

        onEdit() {
          Toast('编辑');
        },
      },
    }
</script>

<style scoped>
  .title{
    text-align: left;
    margin-left: 1rem;
  }
  .price{
    margin-top: 0.4375rem ;
    margin-left: 1rem;
    text-align: left;
    width: 5.94rem;
    height: 2.25rem;
    font-family: PingFangSC-regular;
  }
  .price-label{
    font-size:1.55rem;
    color: #F35C3B;
    }
  .bao{
    text-align: left;
    margin-top: 1rem;
    margin-left: 1rem;
  }
  .bao-p{
    width: 1.63rem;
    height: 1.63rem;
    background-color: rgba(195, 155, 115, 100);
  }
  .serve{
    width: 19.25rem;
    height: 1.25rem;
    margin-top: 1rem;
    margin-left: 0.5rem;
  }
  .specifications{
    margin-top: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: left;
  }
  .serve-content{
    margin-left: 8rem;
    width: 5.5rem;
    height: 1.69rem;
    color: rgba(16, 16, 16, 100);
    font-size: 1.13rem;
    font-weight: bold;
    text-align: center;
    font-family: SourceHanSansSC-bold;
  }
</style>
